<template>
	<view>
		<scroll-view class="scroll-view_H" scroll-x="true">
			<view class="image-box pore" v-for="(item,index) in imgList" :key="index">
				<image class="" referrerpolicy="no-referrer" :src="api_host + item" @click="$utils.previewImages(index,imgList)"/>
				<view class="del" @click="delimg(index)" v-if="mode == 'upload'">
					<u-icon name="close" color="#fff" size="10"></u-icon>
				</view>
			</view>
			<view class="image-box" @click="uploadImg" v-if="mode == 'upload'">
				<image class="image_3" referrerpolicy="no-referrer" src="../../static/images/you/add.png" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {} from '@/common/api.js'
	export default {
		name:'',
		props:{
			imgList:{
				type:Array,
				default:[]
			},
			mode:{
				type:String,
				default:'upload'
			}
		},
		data() {
			return {
				imgList1:[]
			}
		},
		onLoad(option) {
			
		},
		methods: {
			delimg(index){
				const that = this;
				uni.showModal({
					title:'确认删除吗',
					success(res) {
						if(res.confirm){
							that.imgList.splice(index,1);
							that.$emit('imgListChange',that.imgList)
						}
					}
				})
			},
			async uploadImg() {
				const that = this;
				uni.chooseImage({
					count: 9,
					success: async function(e) {
						const {
							tempFilePaths
						} = e;
						for (let i = 0; i < tempFilePaths.length; i++) {
							const element = tempFilePaths[i];
							const result = await that.$utils.uploadFile(element)
							if (result.code == 200) {
								that.imgList.push(result.fileName);
								that.$emit('imgListChange',that.imgList)
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		.image-box {
			display: inline-block;
			width: 160rpx;
			height: 160rpx;
			line-height: 160rpx;
			text-align: center;
			background-color: #fafafa;
			border-radius: 10px;
			margin-right: 10rpx;
			vertical-align: middle;
			image{
				width: 160rpx;
				height: 160rpx;
			}
			.image_3 {
				width: 30px;
				height: 30px;
			}
			.del{
				padding: 5rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				background-color: #000;
				border-radius: 10rpx 0 0 0;
			}
		}
	}
</style>
